@keyframes move-forever
  0%
    transform translate3d(-90px, 0, 0)
  100%
    transform translate3d(85px, 0, 0)
@keyframes blink
  0%
    opacity 1
  50%
    opacity 0
  100%
    opacity 1
.preview
  .navbar
    position absolute
    display block
    top 15px
    right 15px
    width 40px
    height 40px
    text-align center
    line-height 40px
    border-radius 50%
    background-color rgba(0, 0, 0, 0.5) !important
    opacity 0.5
    cursor pointer
    .iconfont
      font-size 18px
      color #ffffff
  .preview-image
    z-index 40
    height 90vh
    width 100%
    background-image url(hexo-config('preview.background.default'))
    background-repeat no-repeat
    background-size unquote(hexo-config('preview.background.size') || '100% 100%')
    background-position unquote(hexo-config('preview.background.position') || center)
    background-attachment fixed
    position relative
    display flex
    justify-content center
    align-items center
    .preview-motto, .preview-cursor
      text-align center
      font-size 3.5em
      padding 1em 0.2em
      font-family 'Quicksand', 'Vollkorn', serif
      font-weight 300
      color convert(hexo-config('preview.motto.color')) || #000000
      margin 0
      @media (max-width 768px)
        font-size 2em
    .preview-cursor
      opacity 1
      animation-duration 1s
      animation-iteration-count infinite
      animation-name blink
    .preview-overlay
      width 100%
      position absolute
      bottom -1px
      left -100vw
      right 0
      z-index 50
      filter drop-shadow(var(--color-background) 100vw 0px)
      .preview-waves
        position relative
        width 100%
        height 15vh
        margin-bottom -7px
        min-height 100px
        max-height 150px
        @media (max-width 768px)
          height 40px
          min-height 40px
      .preview-parallax
        > use
          animation move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
        > use:nth-child(1)
          animation-delay -2s
          animation-duration 7s
        > use:nth-child(2)
          animation-delay -3s
          animation-duration 10s
        > use:nth-child(3)
          animation-delay -4s
          animation-duration 13s
        > use:nth-child(4)
          animation-delay -5s
          animation-duration 20s
  .preview-scroll
    height 10vh
    display flex
    justify-content center
    align-items center
    i
      font-size 32px
